<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花卉预约系统</title>
    <link rel="stylesheet" href="../css/home.css">

    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

</head>
<body>
    <!-- 第一页 -->
    <div class="homePage">
        <!-- logo -->
        <div id="logo">
            <img src="../img/logo.png" alt="">
        </div>
    
        <!-- 输入框 -->
        <div class="inputs"><input type="text" id="userName" placeholder="用户名: "></div>
        <div class="inputs"><input type="text" id="phoneNum" placeholder="+86"></div>
        <div class="inputs"><input type="text" id="IDNum" placeholder="身份证号码: "></div>
        
        <!-- 按钮 -->
        <div class="orderBtn">
            <button class="btn layui-btn layui-btn-radius layui-btn-normal" id="myorderBtn">我的预约</button>
            <button class="btn layui-btn layui-btn-radius layui-btn-normal" id="startorderBtn">开始预约</button>
        </div>
    </div>



    <!-- 第二页 -->
    <div class="orderPage">
        <!-- 下拉框 -->
        <select name="date" class="select-Date">
            <option value="" selected></option>
        </select>

        <div class="contentBox">
            <!-- 标题 -->
            <h3 class="session">
                <span>场次</span>
                <span>状态</span>
            </h3>
    
            <!-- 场次详情 -->
            <ul class="list">
                <li>
                    <span></span>
                    <button></button>
                </li>
                <li>
                    <span></span>
                    <button></button>
                </li>
                <li>
                    <span></span>
                    <button></button>
                </li>
            </ul>
            
            <div class="tip">
                <h2>提示</h2>
                <h4>请确认预约信息</h4>
                <div id="aptDate"></div>
                <div id="aptTime"></div>
                <div id="tipShowId"></div>
                <button id="cancelBtn">取消预约</button>
                <button id="confirmBtn">确认预约</button>
            </div>
         

            <!-- 备注 -->
            <div>★ 一个手机号，一天只能预约一场。</div>
        </div>
    </div>




    <!-- 第三页 -->
    <div class="codePage">
        <div class="visitor"></div>
        <span>:</span>


        <div class="contentBox2">
            <p>欢迎您在9月28日10:00参观2019广州国际
                花卉艺术展暨中国插花花艺展。</p>
    
            <div class="code"></div>
    
            <button class="btn" id="saveImg">保存图片</button>

            <div class="btnBox">
                <button id="reBtn">返回首页</button>
                <button id="ctnBtn">继续预约</button>
                <button id="rcBtn">预约记录</button>
            </div>
    
            <p>请用手机截图此页面，进入参观区域前向工作人员出示，谢谢！</p>
        </div>
    </div>




    <!-- 第四页 -->
    <div class="myOrder">

        <div>
            <div>我的预约</div>
            <button id="reBtn2">返回首页</button>
        </div>
        
        <ul class="orderBox">
            <div class="orderList">
                <div class="uname">姓名：</div>
                <div class="udata">日期：</div> 
                <div class="usession">场次：</div>
                <button class="myqrcode">点击查看二维码</button>
            </div>
        </ul>
        <div class="shade">
            <div class="showCode">
                <img src="" alt="">
            </div>
        </div>

    </div>




    <!-- 第五页 -->
    <div class="noOrder">
        没有记录
    </div>



    
    <script src="../js/home.js"></script>
    
   
   
</body>
</html>